<template>
  <div class="scrollbar-demo">
    <aside class="sidebar">
      <SinScrollbar light :autoShow="false" @reach-bottom="addNum">
        <FakeBlock ref="mockBlock" :num="num"></FakeBlock>
      </SinScrollbar>
    </aside>
    <div class="main">
      <SinScrollbar ref="scrollRef">
        <div class="row-content">
          <FakeBlock :num="20" class="row-item"></FakeBlock>
          <FakeBlock :num="30" class="row-item"></FakeBlock>
        </div>
      </SinScrollbar>
    </div>
    <div class="buttons">
      <a-button type="primary" size="small" @click="$refs.scrollRef.scrollTo('top')">Top</a-button>
      <a-button type="primary" size="small" @click="$refs.scrollRef.scrollTo('bottom')">Bottom</a-button>
      <a-button type="primary" size="small" @click="$refs.scrollRef.scrollTo('left')">Left</a-button>
      <a-button type="primary" size="small" @click="$refs.scrollRef.scrollTo('right')">Right</a-button>
      <a-button type="primary" size="small" @click="$refs.scrollRef.scrollTo('end')">End</a-button>
      <a-button type="primary" size="small" @click="$refs.scrollRef.scrollTo(300)">300</a-button>
    </div>
  </div>
</template>

<script>
// import WScrollbar from 'packages/scrollbar'
// import { WScrollbar } from 'lib/index'
// import 'lib/scrollbar.css'
import FakeBlock from './fakeBlock'
export default {
  name: 'Scrollbar',
  components: {
    // WScrollbar,
    FakeBlock
  },
  data () {
    return {
      rightBarRef: null,
      num: 10
    }
  },
  computed: {},

  created () { },

  mounted () {
    setTimeout(() => {
      // this.$refs.mockBlock.showListNum = 100
      // this.$refs.scrollRef.scrollTo('bottom')
      // this.$refs.scrollRef.scrollTo('right')
    }, 3000)
  },

  methods: {
    getScrollBarRef (ref) {
      this.rightBarRef = ref
    },
    addNum () {
      console.log(1111)

      setTimeout(() => {
        this.$nextTick(() => {
          // this.num = this.num + 10
          this.$refs.mockBlock.showListNum = this.$refs.mockBlock.showListNum + 10
        })
      }, 1000)
    }
  }

}
</script>

<style scoped lang="less">
.scrollbar-demo {
  width: 100%;
  height: 100vh;
  position: relative;
  .sidebar {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.3);
  }
  .main {
    width: calc(100% - 200px);
    height: 100%;
    margin-left: 200px;
    .row-content {
      width: 2000px;
      .row-item {
        min-width: 1000px;
        display: inline-block;
        vertical-align: text-top;
      }
    }
  }
  .buttons {
    position: absolute;
    right: 20px;
    bottom: 20px;
  }
}
</style>
